<template>
	<view>
		<navbar :isback="true" title="集百福"></navbar>

		<u-loading-page icon-size="100rpx" :loading="loading" loading-text="驼乡生活信息超市"></u-loading-page>

		<view class="con" v-if="!loading">
			<swiper v-if="list3.length>0" :indicator-dots="false" class="video" circular interval='2000' :current="curr"
				@change="change">
				<swiper-item v-for="(item,index) in list3" :key="index">
					<image class="video" v-if="getItemType(item) === 'image'" :src="getSource(item)" mode="aspectFill"
						@tap="clickHandler(getItemType(item),index)"></image>
					<video @ended='ended(index)' class="video" v-if="getItemType(item) === 'video'"
						:id="`video-${index}`" :enable-progress-gesture="false" :src="getSource(item)" controls
						@tap="clickHandler(getItemType(item),index)" @fullscreenchange='fullscreenchange'></video>
				</swiper-item>
			</swiper>
			<view class="linkbox" v-if="indexHref">
				{{indexHref}}
			</view>
			<view class="form">
				<view class="form__item">
					<view class="form__item__lable">
						我的姓名
					</view>
					<input class="inp" v-model="form.name" placeholder="请输入真实姓名" />
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="form__item">
					<view class="form__item__lable">
						我的电话
					</view>
					<input class="inp" placeholder="请输入电话号码" v-model="form.phone" maxlength="11" type="number" />
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="form__item">
					<view class="form__item__lable">
						我的住址
					</view>
					<input class="inp" placeholder="请输入详细住址" v-model="form.address" />
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="list">

			</view>
			<view class="footer">
				<u-button @click="submit" :loading="btnloading" :text="'下单 ￥'+form.price+'元'"
					color="linear-gradient(91deg, #6E77FA, #5E77FD)" size="large" shape='circle'></u-button>
			</view>

		</view>
		<view class="kf">
			<button class="u-reset-button" open-type="contact">
				<image src="/static/xishi/kf.png" class="kficon" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script>
	import home from '@/api/_home.js'
	import {
		BASE_URL
	} from '@/api/config';
	export default {
		data() {
			return {
				loading: true,
				btnloading: false,
				list3: [],
				indexHref: '',
				curr: 0,
				value1: '',
				form: {
					type: 2,
					name: '',
					phone: '',
					address: '',
					price: '',
					text: '',
					size: ''
				},
				cursize: 0,
				sizelist: []
			};
		},
		methods: {
			submit() {
				let _this = this
				let {
					name,
					phone,
					address,
					text
				} = this.form
				if (!name) {
					uni.$u.toast('请输入姓名')
					return
				}
				if (!phone) {
					uni.$u.toast('请输入手机号')
					return
				}
				if (!address) {
					uni.$u.toast('请输入地址')
					return
				}
				this.btnloading = true
				home.undifineOrderType(this.form).then(res => {
					_this.paybuy(res)
				})
			},
			ended(index) {
				console.log(this.isqp)
				if (this.isqp) {
					return
				}
				index++
				this.curr = index
				if (this.curr >= this.list3.length) {
					this.curr = 0
				}
				// console.log(this.curr)
				this.playVideo(this.curr)
			},
			prevent(item) {
				// console.log(item)
				this.item = item
			},
			clickHandler(type, index) {
				// this.$emit('click', index)
				// console.log(type,index)
				if (type == 'image') {
					this.preview([this.list3[index]], 0)
				}
				// if(type=='image')
			},
			paybuy(res) {
				let _this = this
				let data = res.data.data
				let appId = data.appId;
				let timeStamp = data.timeStamp;
				let nonceStr = data.nonceStr;
				let packageX = data.package;
				let signType = 'MD5';
				let paySign = data.paySign;

				uni.requestPayment({
					provider: 'wxpay',
					appId: appId, //小程序Appid
					timeStamp: timeStamp, //创建订单时间戳
					nonceStr: nonceStr,
					package: packageX, // 订单包
					signType: signType, // 加密方式统一'MD5'
					paySign: paySign, // 后台支付签名返回
					success: function(res) {
						_this.$u.toast('支付成功')
						setTimeout(() => {
							_this.btnloading = false
							uni.redirectTo({
								url: '/pages/my/jflist'
							})
						}, 1000)
					},
					fail: function(err) {
						_this.$u.toast('支付失败')
						_this.btnloading = false
					},
					complete() {

					}
				});

			},
			getItemType(item) {
				if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
				if (typeof item === 'object' && this.keyName) {
					if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image'
					if (item.type === 'image') return 'image'
					if (item.type === 'video') return 'video'
					return 'image'
				}
			},
			// 获取目标路径，可能数组中为字符串，对象的形式，额外可指定对象的目标属性名keyName
			getSource(item) {
				// console.log(item)
				if (typeof item === 'string') return item
				if (typeof item === 'object' && this.keyName) return item[this.keyName]
				else uni.$u.error('请按格式传递列表参数')
				return ''
			},
			fullscreenchange(e) {
				this.isqp = e.detail.fullScreen
				// console.log(e.detail.fullScreen)
			},
			change(e) {
				// 当前的激活索引
				// console.log(e)
				clearTimeout(this.timmer)
				let _this = this
				const {
					current
				} = e.detail
				if (this.getItemType(this.list3[current]) == 'image') {
					this.timmer = setTimeout(() => {
						_this.curr++
						if (_this.curr >= _this.list3.length) {
							_this.curr = 0
						}
					}, 2000)
				}
				this.pauseVideo(this.swipercur)
				this.swipercur = current
				this.curr = current
				this.playVideo(this.swipercur)
			},
			pauseVideo(index) {
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.pause()
				}
			},
			playVideo(index) {
				// console.log(this.list3[0])
				const lastItem = this.getSource(this.list3[index])
				if (uni.$u.test.video(lastItem)) {
					// 当视频隐藏时，暂停播放
					const video = uni.createVideoContext(`video-${index}`, this)
					video.play()
				}
			},
			getindex() {
				this.list3 = []
				home.getInitData({
					type: 2
				}).then(res => {
					if (res.data.code == 1) {
						this.loading = false
						res.data.data.banner[0].images.split(',').map(t => {
							this.list3.push(BASE_URL + t)
						})
						let _this = this
						if(this.list3.length>1){
							if (this.getItemType(this.list3[0]) == 'image') {
								this.timmer = setTimeout(() => {
									_this.curr++
								}, 2000)
							}else{
								this.playVideo(0)
							}
						}else{
							this.playVideo(0)
						}
						this.indexHref = res.data.data.intro.title
					}
				})
				home.readConfig({
					configName: 'fuPrice'
				}).then(res => {
					if (res.data.code == 1) {
						this.form.price = res.data.data.fuPrice
						// this.form.price=this.price*this.form.number
					}
				})
			},
		},
		onLoad() {
			this.getindex()
			let _this = this
			setTimeout(() => {
				_this.istj = false
			}, 10000)

		}
	}
</script>

<style lang="scss">
	.con {
		padding: 30rpx;

		.linkbox {
			margin-top: 28rpx;
			// height: 96rpx;
			background: #F7F7F9;
			border-radius: 15rpx;
			padding: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #1E1E1E;
			margin-bottom: 16rpx;
		}

		.linkbox1 {
			text-align: center;
			background: rgba(54, 146, 255, .2);
			color: #3692FF;
			margin-bottom: 0;
			margin-top: 0;
		}
	}

	.swiper {
		height: 450rpx;
	}

	.video {
		width: 690rpx;
		height: 484rpx;
		background: #1B64F9;
		border-radius: 25rpx;
	}

	.form {
		&__item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 44rpx 0;

			&__lable {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				line-height: 30rpx;
			}

			.inp {
				flex: 1;
				text-align: right;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
				margin-right: 22rpx;
			}

			/deep/.input-placeholder {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}
		}

		&__title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #1E1E1E;
			line-height: 30rpx;
			display: flex;
			align-items: center;
			margin-top: 42rpx;
			margin-bottom: 30rpx;

			&__line {
				width: 11rpx;
				height: 32rpx;
				background: #3692FF;
				border-radius: 6rpx;
				margin-right: 12rpx;
			}
		}
	}

	/deep/.u-textarea {
		background-color: #F7F7F9 !important;
	}

	.footer {
		padding: 44rpx 40rpx;
		width: 670rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
	}

	.list {
		padding-bottom: 189rpx;

		&__item {
			margin-bottom: 14rpx;
			height: 96rpx;
			background: #F7F7F9;
			border-radius: 15rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #090909;
			line-height: 36rpx;
			border: 2rpx solid #F7F7F9;

			&__pic {
				width: 96rpx;
				height: 96rpx;
				background: #050030;
				border-radius: 15rpx 0rpx 0rpx 15rpx;
				margin-right: 30rpx;
			}

			&__price {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 26rpx;
				color: rgba(9, 9, 9, .6);
				line-height: 36rpx;
			}
		}

		.ac {
			border: 2rpx solid #3692FF;
		}
	}
</style>